<template>
  <div id="pubMysqlCreate">
    <div style='display: flex;display: -webkit-flex;justify-content:space-around;width: 100%'>
      <div class="left" style='width: 65%'>
        <!--card1 基本信息-->
        <el-card shadow="hover" style='width: 100%'>
          <span> 基本信息</span>
          <el-form label-position="left" label-width="100px" :model="baseForm" class='formClass'>
            <!--  云平台 -->
            <el-form-item label="云平台">
              <el-radio-group v-model="baseForm.cloudPlatformId" size="mini" style='width: 50%' @change='changeCloudPlatform'>
                <el-radio-button style='width: 100px' v-for="item in cloudPlatformList" class="radio" :key='item.id' :label="item.id">{{ item.platformName }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <!--  付费类型 -->
            <el-form-item label="付费类型">
              <el-radio-group v-model="baseForm.instanceChargeType" size="mini" style='width: 100%'>
                <el-radio-button plain v-for="item in instanceChargeTypeList" :key='item.type' class="radio" :label="item.type">
                  <div>{{ item.name }}</div>
                  <div style='font-size: 5pt'>{{ item.description }}</div>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <!-- 地域 -->
            <el-form-item label="地域">
              <span>{{ baseForm.regionName }}</span>
              <!-- <el-select v-model="baseForm.regionId" placeholder="请选择地域" @change="changeRegion" v-loading="loading.regionId">
                <el-option v-for="item in regionList" :key="item.regionId" :label="item.localName" :value="item.regionId"></el-option>
              </el-select> -->
              <div class='descriptionClass'>不同地域的实例之间内网互不相通；</div>
              <div class='descriptionClass' style='margin-top: -15px'>靠近选择的地域，可降低网络时延、提高用户访问速度</div>
            </el-form-item>
            <!-- 数据库版本 -->
            <el-form-item label="数据库版本">
              <el-select v-model="baseForm.version" placeholder="请选择地域" @change="changeVersion" v-loading="loading.version">
                <el-option v-for="item in versionList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <!-- 可用区 -->
            <el-form-item label="可用区">
              <el-select v-model="baseForm.zoneId" placeholder="请选择地域" @change="changeZoneList" v-loading="loading.zoneId">
                <el-option v-for="item in zoneList" :key="item.zoneId" :label="item.localName" :value="item.zoneId"></el-option>
              </el-select>
              <div class='descriptionClass'>可用区是指在同一地域内，电力和网络互相独立的物理区域</div>
              <div class='descriptionClass' style='margin-top: -15px'>同一可用区内实例之间的网络延时更小，其用户访问速度更快</div>
            </el-form-item>
            <!-- 网络 -->
            <el-form-item label="网络">
              <el-row>
                <el-col :span='7'>
                  <el-select v-model="baseForm.vpcId" placeholder="请选择专有网络" @change='changeVpcList' v-loading="loading.vpcId">
                    <el-option v-for="item in vpcList" :key="item.vpcId" :label="item.vpcName" :value="item.vpcId">
                      <span style="float: left">{{ item.vpcName }}</span>
                      <span style="float: right;margin-left: 8px;color: #8492a6; font-size: 8px">{{ item.vpcId }}</span>
                    </el-option>
                  </el-select>
                  <div>
                    <el-button type="text" @click='createNetwork' :disabled='trueBool'>创建专有网络</el-button>
                  </div>
                </el-col>
                <el-col :span='7'>
                  <el-select v-model="baseForm.switchId" placeholder="请选择交换机" v-loading="loading.switchId">
                    <el-option v-for="item in switchList" :key="item.vSwitchId" :label="item.vSwitchName" :value="item.vSwitchId">
                      <span style="float: left">{{ item.vSwitchName }}</span>
                      <span style="float: right;margin-left: 8px;color: #8492a6; font-size: 8px">{{ item.vSwitchId }}</span>
                    </el-option>
                  </el-select>
                  <div>
                    <el-button type="text" @click='createSwitch' :disabled='trueBool'>创建交换机</el-button>
                  </div>
                </el-col>
                <el-col :span='7'>
                  <span v-if="baseForm.switchId != null && baseForm.switchId != ''">{{ '网段:' + switchList.find(s => s.vSwitchId === baseForm.switchId).cidrBlock }}</span>
                  <span v-if="baseForm.switchId != null && baseForm.switchId != ''">{{ '| 可用IP:' + switchList.find(s => s.vSwitchId === baseForm.switchId).availableIpAddressCount }}</span>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="自定义端口">
              <el-input v-model="baseForm.port" style='width: 20%'></el-input>
            </el-form-item>
          </el-form>
        </el-card>

        <!--card2-->
        <el-card shadow="hover" style='width: 100%;margin-top: 20px'>
          <span> 磁盘和实例</span>
          <el-form label-position="left" label-width="100px" :model="diskForm" class='formClass'>
            <el-form-item label="磁盘">
              <el-table :data="diskForm.systemDiskList" style="width:100%" v-loading="loading.sysDiskType">
              <el-table-column prop="type" label="类型">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" @change="changeDiskType">
                      <el-option v-for="item in sysDiskTypeList" :key="item.diskType" :label="item.diskName" :value="item.diskType">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="capacity" label="容量" width='135'>
                  <template slot-scope="scope">
                    <el-input-number style="width:80%" controls-position="right" size="mini" v-model="scope.row.capacity" :min="40" :max="32768" :step="1"></el-input-number>
                    <span>GiB</span>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" label="数量">
                  <template slot-scope="scope">
                    <span>1</span>
                  </template>
                </el-table-column>
                <el-table-column prop="iops" label="IOPs"></el-table-column>
                <el-table-column prop="performance" label="性能"></el-table-column>
                <el-table-column prop="action" label="操作" width="200" fixed="right">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.release" disabled="">随实例释放</el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
          <el-form label-position="left" label-width="100px" :model="instanceForm" class='formClass'>
            <el-form-item label="实例">
              <el-tabs v-model="activeSpecTab">
                <el-tab-pane label="全部规格" name="1">
                  <div>
                    <span style='font-size: 8px;margin-right: 5px;display:inline-block; width:60px;'>筛选</span>
                    <el-select v-model="baseForm.cpuCoreCount" placeholder="选择vCPU" @change='pagination.currentPage = 1; getInstanceTypeList();' clearable>
                      <el-option v-for="item in vCPUList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="baseForm.memorySize" placeholder="选择内存" @change='pagination.currentPage = 1; getInstanceTypeList();' clearable>
                      <el-option v-for="item in memoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </div>
                  <el-table :data="instanceTypeList" ref="instanceTypeList" :row-style="{height: '30px'}" :cell-style="{padding: '0'}"
                            :header-row-style="{height: '40px'}" :header-cell-style="{padding: '0'}"
                            style="width: 95%;margin-top: 20px" border v-loading="loading.instanceType"
                            @select="selectInstanceType" @select-all="selectInstanceTypeAll" :row-key="getInstanceTypeKey">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="typeId" label="实例代码" :show-overflow-tooltip="true" fixed
                                     width="180"></el-table-column>
                    <el-table-column prop="deviceTypeName" label="实例类型" fixed width="100"></el-table-column>
                    <el-table-column prop="cpu" label="vCPU" sortable :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="memory" label="内存" sortable :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="price" label="参考价格" :show-overflow-tooltip="true" fixed="right">
                      <template slot-scope="scope">
                        <!-- <span>¥{{ scope.row.price }}/月</span> -->
                        <span>-</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination style='width: 95%;height:40px'
                                 @current-change="handleCurrentChange"
                                 :current-page="pagination.currentPage" :page-size="pagination.size"
                                 layout="total, prev, pager, next" :total="pagination.total">
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="最近使用规格" name="2" :disabled='trueBool'></el-tab-pane>
              </el-tabs>
            </el-form-item>
          </el-form>
        </el-card>

        <!--card4-->
        <el-card shadow="hover" style='width: 100%;margin-top: 20px;display: none;'>
          <span> 带宽和安全组</span>
          <el-form label-position="left" label-width="100px" class='formClass' :model="advancedOptionForm">
            <el-form-item label="安全组">
              <el-tabs v-model="bandwidthForm.group" style='width:700px'>
                <el-tab-pane label="已有安全组" name="0">
                  <el-table :data="securityGroupList" :row-style="{height: '30px'}" :cell-style="{padding: '0'}"
                            :header-row-style="{height: '40px'}" :header-cell-style="{padding: '0'}"
                            style="width: 95%;margin-top: 20px" border v-loading="loading.instanceType"
                            @selection-change="handleSecurityGroupChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="securityGroupName" label="安全组名称" :show-overflow-tooltip="true"
                                     width="240"></el-table-column>
                    <el-table-column prop="" label="安全组详情">
                      <el-button type="text" :disabled='trueBool'>查看明细</el-button>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="新建安全组" name="1" :disabled='trueBool'></el-tab-pane>
              </el-tabs>
            </el-form-item>

            <!-- <el-form-item label="安全组名称">
              <el-input v-model="bandwidthForm.securityGroupName" style='width: 40%'></el-input>
            </el-form-item>
            <el-form-item label="安全组类型">
              <el-radio-group v-model="bandwidthForm.securityGroupType">
                <el-radio-button class="radio" label="normal">普通安全组</el-radio-button>
                <el-radio-button class="radio" label="enterprise">企业级安全组</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="开通IPv4端口">
              <el-card shadow="never" style='width: 65%;'>
                <el-checkbox-group v-model="bandwidthForm.IPv4Ports">
                  <el-checkbox v-for="item in IPv4PortList" :label="item.port" :key="item.port">{{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-card>
            </el-form-item> -->
          </el-form>
        </el-card>

        <!--card5-->
        <el-card shadow="hover" style='width: 100%;margin-top: 20px'>
          <span> 高级选项</span>
          <el-form label-position="left" label-width="100px" style='width:50%' class='formClass'
                   :model="baseForm" ref="form" :rules="advancedOptionFormRules">
            <el-form-item label="实例名称" prop="instanceName">
              <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">实例名称长度为2-128个字符<br/>实例名称需以字母或中文开头</div>
                <el-input v-model="baseForm.instanceName"></el-input>
              </el-tooltip>
            </el-form-item>

            <el-form-item label="描述" prop="description">
              <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">描述长度为2-256个字符<br/>描述不能以http://或https://开头</div>
                <el-input type="textarea" v-model="baseForm.description"></el-input>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <div class='right'>
        <el-card shadow="hover" style='width: 100%;margin-top: 10px'>
          <el-form label-position="left" label-width="100px" style='width:100%;' class='formClass' :model="payForm">
            <!-- <el-form-item label="购买实例数量">
              <el-input-number size="mini" v-model="payForm.instanceNum" :min="1" :max="maxInstanceNum" :step="1"></el-input-number>
            </el-form-item> -->
            <el-form-item v-if="baseForm.instanceChargeType == 'PREPAID'" label="购买时长">
              <el-select v-model="payForm.duration">
                <el-option v-for="item in durationList" :key="item.id"
                           :label="item.period + ' ' + (item.unit == 'Week'?'周':(item.unit == 'Month'?'月':'年'))"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="自动续费">
              <el-checkbox v-model="payForm.autoRenew">启用自动续费</el-checkbox>
            </el-form-item> -->
            <el-form-item label="配置概要">
            </el-form-item>
            <el-descriptions title="" :column="1">
              <el-descriptions-item label="付费类型">
                <span>{{ instanceChargeTypeList.find(i => i.type == baseForm.instanceChargeType).name }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="地域">
                <span :class="{'font_red':!selectedRegion}">
                 {{ selectedRegion ? selectedRegion : '大区不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="版本">
                <span :class="{'font_red':!selectedVersion}">
                 {{ selectedVersion ? selectedVersion : '数据库版本不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="可用区">
                <span :class="{'font_red':!selectedZone}">
                 {{ selectedZone ? selectedZone : '可用区不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="专有网络">
                <span :class="{'font_red':!selectedVpc}">
                 {{ selectedVpc ? selectedVpc : '专有网络不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="交换机">
                <span :class="{'font_red':!selectedSwitch}">
                 {{ selectedSwitch ? selectedSwitch : '交换机不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="实例规格">
                <span :class="{'font_red':!selectedInstanceType}">
                  {{ selectedInstanceType ? selectedInstanceType : '实例规格不能为空' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="磁盘">
                <span :class="{'font_red':!selectedSystemDisk}">
                  {{ selectedSystemDisk ? selectedSystemDisk : '系统磁盘不能为空' }}
                </span>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="安全组">
                <span :class="{'font_red':!selectedSecurityGroup}">
                  {{ selectedSecurityGroup ? selectedSecurityGroup : '安全组不能为空' }}
                </span>
              </el-descriptions-item> -->
              <el-descriptions-item label="实例价格">
                <span style="color: #ff8a00;">
                  {{ price.tradePrice ? (this.baseForm.instanceChargeType === "POSTPAID"? price.tradePrice + ' 元/小时' : price.tradePrice + ' 元') : '价格计算中' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="带宽价格" v-if="price.bandwidthPrice">
                <span style="color: #ff8a00;">
                  {{ price.bandwidthPrice ? price.bandwidthPrice + ' 元/GB' : '价格计算中' }}
                </span>
              </el-descriptions-item>
            </el-descriptions>
            <el-form-item>
              <el-button type="primary" plain @click="createInstance" :disabled="createInstanceDisabled">创建实例</el-button>
              <el-button type="warning" plain @click="cancel" style="margin-left: 20px;">返回</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>


  </div>
</template>

<script src='./js/create.js'>
</script>
<style lang="scss">

.font_red {
  color: red;
}

@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/pubMysqlCreate.scss';
</style>
